<template>
  <div class="standard-container">
    <div class="items">
      <div class="item" v-for="i in info" :key="i.name">
        <label>{{i.name}}</label>
        <span class="value">{{i.value}}</span>
        <span class="unit">{{i.unit}}</span>
        <div class="subInfo" v-if="i.hasSubInfo">
          <div class="subItem" v-for="j in i.subInfo" :key="j.name">
            <label>{{j.name}}</label>
            &emsp;<span class="value">{{j.value}}</span>
          </div>
        </div>
      </div>
    </div>
    <p class="note">
      💡如果想要了解更多详细户型数据，可前往<router-link to="/design">住宅设计</router-link>页面
    </p>
  </div>
</template>

<script>
export default {
  name: 'Standard',
  data(){
    return{
      info:[
        {
          name: '用地面积',
          value: '24',
          unit: '公顷',
          hasSubInfo: false
        },
        {
          name: '总建筑面积',
          value: '481428',
          unit: 'm²',
          hasSubInfo: true,
          subInfo:[
            { name: '住宅建筑面积', value: '334653m²' },
            { name: '公寓建筑面积', value: '84609m²' },
            { name: '配套公建面积', value: '62166m²' }
          ]
        },
        {
          name: '建筑密度',
          value: '22.7%',
          unit: '',
          hasSubInfo: false
        },
        {
          name: '总绿地面积',
          value: '56532',
          unit: 'm²',
          hasSubInfo: false
        },
        {
          name: '绿化率',
          value: '23.5%',
          unit: '',
          hasSubInfo: false
        },
        {
          name: '容积率',
          value: '2.1',
          unit: '',
          hasSubInfo: false
        },
        {
          name: '居住人口',
          value: '10000',
          unit: '人',
          hasSubInfo: false
        },
        {
          name: '车位数',
          value: '5500',
          unit: '个',
          hasSubInfo: false
        },
        {
          name: '公寓套数',
          value: '1461',
          unit: '套',
          hasSubInfo: false
        },
        {
          name: '住宅套数',
          value: '3074',
          unit: '套',
          hasSubInfo: true,
          subInfo:[
            { name: '一居室', value:'1222套（39%）' },
            { name: '二居室', value:'1004套（33%）' },
            { name: '三居室', value:'848套（28%）' }
          ]
        },
      ]
    }
  }
}
</script>

<style scoped>
.standard-container{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.items{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 90%;
}

.items > .item{
  width: 23%;
  height: fit-content;
  padding: 1rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0px 16px 48px rgba(50, 50, 50, 0.2);
  margin: 1rem 0;
}

.item > label{
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.item > .value{
  font-weight: 1000;
  font-size: 2rem;
}

.item > .unit{
  font-weight: 800;
}

.item:nth-child(1) > .value, .item:nth-child(6) > .value{
  color: var(--pink);
}
.item:nth-child(2) > .value, .item:nth-child(7) > .value{
  color: var(--yellow);
}
.item:nth-child(3) > .value, .item:nth-child(8) > .value{
  color: var(--green);
}
.item:nth-child(4) > .value, .item:nth-child(9) > .value{
  color: var(--blue);
}
.item:nth-child(5) > .value, .item:nth-child(10) > .value{
  color: var(--purple);
}

.item > .subInfo{
  border-top: 1px solid #dddddd;
  margin-top: 0.5rem;
  padding-top: 0.5rem
}

.subInfo > .subItem{
  color: gray;
}
.subInfo > .subItem > label{
  font-weight: 600;
}

.item:hover{
  animation: swing 0.5s ease-in-out;
}

.item:hover label, .item:hover span, .item:hover > .value{
  color: white;
}
.item:hover > .subInfo{
  border-top: 1px solid white;
}

.item:nth-child(1):hover, .item:nth-child(6):hover{
  background: var(--pink);
}
.item:nth-child(2):hover, .item:nth-child(7):hover{
  background: var(--yellow);
}
.item:nth-child(3):hover, .item:nth-child(8):hover{
  background: var(--green);
}
.item:nth-child(4):hover, .item:nth-child(9):hover{
  background: var(--blue);
}
.item:nth-child(5):hover, .item:nth-child(10):hover{
  background: var(--purple);
}

.note{
  width: 90%;
  text-align: center;
  margin: 1rem 0;
  font-size: 1rem;
}

.note > a{
  text-decoration: none;
  font-weight: 600;
  color: var(--blue);
}

@keyframes swing {
  10%{
    transform: rotate(2deg);
  }
  20%{
    transform: rotate(-2deg);
  }
  40%{
    transform: rotate(5deg);
  }
  60%{
    transform: rotate(-5deg);
  }
  80%{
    transform: rotate(2deg);
  }
  90%{
    transform: rotate(-2deg);
  }
}

@media screen and (max-width: 1023px) {
  .items > .item{
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  .items > .item{
    width: 48%;
  }
}
@media screen and (max-width: 320px) {
  .items > .item{
    width: 100%;
  }
}

</style>